<template>
  <s-clean-layout :title="giftBookTitle" navbar="normal">
    <view class="detail-container">      
      <!-- 礼簿统计信息 -->
      <view class="gift-summary-container">
        <view class="gift-summary-card" :style="{ backgroundColor: summaryBgColor }">
          <view class="summary-amount">
            <text class="amount-value">{{ totalAmount }}</text>
            <text class="amount-label">{{ isReceiveType ? '收礼总额' : '送礼总额' }}</text>
          </view>
          <view class="summary-divider"></view>
          <view class="summary-count">
            <text class="count-value">{{ giftRecords.length }}</text>
            <text class="count-label">礼簿人数</text>
          </view>
        </view>
      </view>
      
      <!-- 礼金记录列表 -->
      <scroll-view scroll-y class="gift-list">
        <!-- 平铺展示礼金记录 -->
        <view 
          class="gift-item" 
          v-for="(item, index) in giftRecords" 
          :key="index"
          @tap="viewRecordDetail(item.id)"
        >
          <view class="person-avatar">
            <image v-if="item.avatarUrl" :src="item.avatarUrl" mode="aspectFill" class="avatar-image"></image>
            <text v-else>{{ item.contactName.charAt(0) }}</text>
          </view>
          <view class="gift-info">
            <view class="person-name">
              {{ item.contactName }}
            </view>
            <view class="gift-date">{{ item.date }}</view>
          </view>
          <view class="gift-amount">
            <view class="amount-container">
              <text :class="{ 'amount-positive': isReceiveType, 'amount-negative': !isReceiveType }">
                {{ isReceiveType ? '收' : '送' }}{{ item.amount }}
              </text>
              <uni-icons type="right" size="16" color="#ccc"></uni-icons>
            </view>
            <view v-if="item.gift" class="gift-item-text">
              <uni-icons type="gift" size="14" color="#ff6b6b" class="gift-icon"></uni-icons>
              {{ item.gift }}
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 添加悬浮按钮 -->
      <view class="floating-buttons">
        <view class="floating-btn edit-floating-btn" @tap="editGiftBook">
          <uni-icons type="compose" size="24" color="#fff"></uni-icons>
        </view>
        <view class="floating-btn add-floating-btn" @tap="toggleAddMenu">
          <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
        </view>
      </view>
      
      <!-- 添加按钮下拉菜单 -->
      <view class="add-menu" v-if="showAddMenu">
        <view class="add-menu-item" @tap="addSingleRecord">
          <text>单笔添加</text>
        </view>
        <view class="add-menu-item" @tap="addBatchRecords">
          <text>批量添加</text>
        </view>
      </view>
      
      <!-- 添加遮罩层，点击时关闭菜单 -->
      <view class="menu-mask" v-if="showAddMenu" @tap="showAddMenu = false"></view>
    </view>
  </s-clean-layout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import GiftApi from '@/pages/money/api/gift';

// 礼簿基本信息
const giftBookId = ref(0);
const giftBookTitle = ref('结婚');
const giftBookType = ref('receive'); // receive 或 send
const isReceiveType = computed(() => giftBookType.value === 'receive');
const summaryBgColor = ref('#ff6b6b'); // 默认颜色，将从路由参数获取
const totalAmount = ref('0');

// 礼金记录数据
const giftRecords = ref([]);

// 页面加载时获取路由参数
onMounted(() => {
  // 修改获取页面参数的方式
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const params = currentPage.options || {};
  
  if (params.id) {
    giftBookId.value = params.id;
    giftBookType.value = params.type || 'receive';
    giftBookTitle.value = params.title || '礼簿详情';
    
    // 根据礼簿类型设置统计卡片颜色，不再使用账簿的coverColor
    summaryBgColor.value = isReceiveType.value ? '#ff6b6b' : '#5a9cf8';
  }
});

// 添加页面显示时的处理
onShow(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const params = currentPage.options || {};
  
  fetchGiftBookDetail(params.id);
});

// 获取礼簿详情
const fetchGiftBookDetail = async (id) => {
  try {
    const response = await GiftApi.queryAccountBookGift({
      accountBookId: id // 直接使用传入的id作为accountBookId
    });
    
    if (response.code === 0 && response.data) {
      // 处理返回的数据
      giftRecords.value = response.data.map(item => ({
        id: item.id,
        contactName: item.contactName,
        amount: item.giftAmount,
        gift: item.giftItem,
        date: formatDate(item.giftDate),
        remark: item.remark,
        avatarUrl: item.avatarUrl // 添加头像URL字段
      }));
      
      // 计算总金额
      const total = giftRecords.value.reduce((sum, item) => sum + (Number(item.amount) || 0), 0);
      totalAmount.value = total.toString();
    } else {
      uni.showToast({
        title: response.msg || '获取礼簿详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取礼簿详情失败:', error);
    uni.showToast({
      title: '获取礼簿详情失败',
      icon: 'none'
    });
  }
};

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 查看记录详情
const viewRecordDetail = (id) => {
  sheep.$router.go('/pages/money/gift-record-edit', {
    id: id,
    bookId: giftBookId.value,
    bookType: giftBookType.value,
    title: giftBookTitle.value,
    isAdd: false
  });
};

// 添加菜单相关状态
const showAddMenu = ref(false);

// 切换添加菜单显示状态
const toggleAddMenu = (e) => {
  if (e) e.stopPropagation(); // 阻止事件冒泡
  showAddMenu.value = !showAddMenu.value;
};

// 单笔添加
const addSingleRecord = () => {
  showAddMenu.value = false;
  sheep.$router.go('/pages/money/gift-record-edit', {
    bookId: giftBookId.value,
    bookType: giftBookType.value,
    title: giftBookTitle.value,
    isAdd: true
  });
};

// 批量添加
const addBatchRecords = () => {
  showAddMenu.value = false;
  sheep.$router.go('/pages/money/gift-record-batch', {
    bookId: giftBookId.value,
    bookType: giftBookType.value,
    title: giftBookTitle.value
  });
};

// 返回上一页 - 保留此函数但不再使用
const goBack = () => {
  uni.navigateBack();
};

// 编辑礼簿
const editGiftBook = () => {
  sheep.$router.go('/pages/money/gift-book-edit', {
    id: giftBookId.value,
    type: giftBookType.value
  });
};
</script>

<style lang="scss" scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative; /* 添加相对定位，作为悬浮按钮的参考 */
}

/* 移除旧的导航栏样式 */

.gift-summary-container {
  padding: 30rpx;
  background-color: #f5f5f5;
}

.gift-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  color: #fff;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.summary-amount, .summary-count {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.summary-divider {
  width: 2rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.3);
}

.amount-value, .count-value {
  font-size: 56rpx;
  margin-bottom: 10rpx;
}

.amount-label, .count-label {
  font-size: 26rpx;
  opacity: 0.9;
}

.gift-list {
  flex: 1;
  background-color: #f5f5f5;
  padding: 0 30rpx 30rpx;
  padding-bottom: 150rpx; /* 增加底部padding，为悬浮按钮留出空间 */
  overflow-y: auto;
  box-sizing: border-box;
}

.gift-item {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.person-avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  margin-right: 16rpx;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gift-info {
  width: 45%; /* 减小信息区域宽度 */
  overflow: hidden;
  min-width: 0;
}

.gift-amount {
  flex: 1; /* 让金额区域占据剩余空间 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右对齐 */
  font-size: 28rpx;
  padding-right: 10rpx;
  overflow: hidden;
}

.amount-container {
  display: flex;
  align-items: center;
}

.amount-positive, .amount-negative {
  margin-right: 8rpx;
}

.amount-positive {
  color: #ff6b6b;
}

.amount-negative {
  color: #5a9cf8;
}

.gift-item-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  text-align: right;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.gift-icon {
  margin-right: 4rpx;
}

.person-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.gift-date {
  font-size: 24rpx;
  color: #999;
}

/* 添加悬浮按钮样式 */
.floating-buttons {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  z-index: 99;
}

.floating-btn {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

.edit-floating-btn {
  background-color: #5a9cf8;
}

.add-floating-btn {
  background-color: #ff6b6b;
}

/* 修改下拉菜单样式 */
.add-menu {
  position: fixed;
  right: 30rpx;
  bottom: 220rpx; /* 位于添加按钮上方 */
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: 200rpx;
  overflow: hidden;
}

.add-menu-item {
  padding: 24rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.add-menu-item:last-child {
  border-bottom: none;
}

.add-menu-item:active {
  background-color: #f9f9f9;
}

/* 添加遮罩层 */
.menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 98;
}
</style>